/*******************************
             Flex
*******************************/
.ui.flex{
    display:flex!important;
    &.column{
        flex-direction:column;
        //justify-content:space-between;
        align-items:stretch;
        //纵向对齐方式
        &.column-col-top{
            justify-content:flex-start;
        }
        &.column-col-bottom{
            justify-content:flex-end;
        }
        &.column-col-center{
            justify-content:center;
        }
        &.column-col-between{
            justify-content:space-between;
        }
        &.column-col-around{
            justify-content:space-around;
        }
        //横向对齐方式
        &.column-row-left{
            align-items:flex-start;
        }
        &.column-row-right{
            align-items:flex-end;
        }
        &.column-row-center{
            align-items:center;
        }
        &.column-row-baseline{
            align-items:baseline;
        }
        &.column-row-stretch{
            align-items:stretch;
        }
        //多列横向对齐方式
        &.column-multi-line-row-left{
            align-content:flex-start;
        }
        &.column-multi-line-row-right{
            align-content:flex-end;
        }
        &.column-multi-line-row-center{
            align-content:center;
        }
        &.column-multi-line-row-between{
            align-content:space-between;
        }
        &.column-multi-line-row-around{
            align-content:space-around;
        }
        &.column-multi-line-row-stretch{
            align-content:stretch;
        }
    }
    > .item{
        position:relative;
        /*background:#fff;*/
        &.one{ flex:1; }
        &.two{ flex:2; }
        &.three{ flex:3; }
        &.four{ flex:4; }
        &.five{ flex:5; }
        &.six{ flex:6; }
        &.seven{ flex:7; }
        &.eight{ flex:8; }
        &.nine{ flex:9; }
        > .content{
            position:absolute;
            width:100%;
            height:100%;
        }
        &.overflow-y{
            height:100%;
            overflow-y:scroll;
        }
        &.overflow-x{
            width:100%;
            overflow-x:scroll;
        }
    }
    //折行
    &.flex-nowrap{
        flex-wrap:nowrap;
    }
    &.flex-wrap{
        flex-wrap:wrap;
    }
    &.flex-wrap-reverse{
        flex-wrap:wrap-reverse;
    }
    //横向对齐方式
    &.row-left{
        justify-content:flex-start;
    }
    &.row-right{
        justify-content:flex-end;
    }
    &.row-center{
        justify-content:center;
    }
    &.row-between{
        justify-content:space-between;
    }
    &.row-around{
        justify-content:space-around;
    }
    //纵向对齐方式
    &.col-top{
        align-items:flex-start;
    }
    &.col-bottom{
        align-items:flex-end;
    }
    &.col-center{
        align-items:center;
    }
    &.col-baseline{
        align-items:baseline;
    }
    &.col-stretch{
        align-items:stretch;
    }
    //多行纵向对齐方式
    &.multi-line-col-top{
        align-content:flex-start;
    }
    &.multi-line-col-bottom{
        align-content:flex-end;
    }
    &.multi-line-col-center{
        align-content:center;
    }
    &.multi-line-col-between{
        align-content:space-between;
    }
    &.multi-line-col-around{
        align-content:space-around;
    }
    &.multi-line-col-stretch{
        align-content:stretch;
    }
}
/*******************************
         Site Overrides
*******************************/








